<template>
  <div>
    <el-form class="lable-top" label-position="top" size="mini">
      <el-row v-permission="['super']" :gutter="10">
        <el-col :span="4">
          <el-form-item label="组织">
            <el-select v-model="search.org_id" filterable>
              <el-option
                v-for="(item, index) in company"
                :key="index"
                :label="item.name"
                popper-class="w100"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label=" ">
            <el-button @click="handleClick">获取会话列表</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="el-row--flex is-justify-space-between">
      <div class="el-row--flex">
        <el-button size="small" @click="handleUserLogoutForce">
          注销用户会话
        </el-button>
      </div>
    </div>
    <el-table
      class="mt10"
      :data="tableData"
      :header-cell-style="{ background: '#f5f5f5' }"
      size="mini"
    >
      <el-table-column label="选择" width="60">
        <template slot-scope="scope">
          <el-radio
            v-model="tableSelect"
            :label="scope.row.user_id"
            style="margin-left: 10px;"
            @change="getTemplateRow(scope.row.user_id)"
          >
            &nbsp;
          </el-radio>
        </template>
      </el-table-column>
      <el-table-column label="用户 ID" prop="user_id" sortable />
      <el-table-column label="邮箱" prop="email" sortable />
      <el-table-column label="姓名" prop="user_name" sortable />
      <el-table-column label="角色" prop="role" sortable />
      <el-table-column label="IP" prop="ip" sortable />
      <el-table-column label="国家-省份/州" prop="country" sortable />
      <el-table-column label="城市" prop="city" sortable />
    </el-table>
    <div class="mt10 el-row--flex is-justify-end">
      <el-pagination
        background
        :current-page="page"
        layout="total, prev, pager, next"
        :page-size="limit"
        :page-sizes="[100, 200, 300, 400]"
        small
        :total="count"
        @current-change="handleCurrentChangePage"
      />
    </div>
  </div>
</template>

<script>
import org_getall from "@/utils/mixin/org_getall";
import user from "@/api/user";
import radioTable from "@/utils/mixin/radioTable";
import checkSelectTable from "@/utils/mixin/checkSelectTable";
export default {
  name: "Sessions",
  mixins: [org_getall, radioTable, checkSelectTable],
  data: () => {
    return {
      tableData: [],
      search: {
        org_id: ""
      },
      limit: 50,
      page: 1,
      count: 0
    };
  },
  mounted() {
    this.loadingData();
  },
  methods: {
    handleUserLogoutForce() {
      let data = {};
      this.is_check_table("user_id") &&
        (data = this.is_get_select_data()) &&
        user
          .logout_force({
            user_id: data.user_id
          })
          .then(res => {
            if (res.data.message == "登出成功") {
              window.open("/logout.php", "_self");
            } else if (res.data.code == 200) {
              this.$message({
                message: res.data.message,
                type: "success"
              });
              this.loadingLog();
            } else {
              this.$message({
                message: res.data.message,
                type: "warning"
              });
            }
          });
    },
    async loadingData() {
      await this.loadingOrgGetall();
      await this.loadingLog();
    },
    loadingLog() {
      let data = Object.assign({}, this.search);
      return user
        .sessions({
          limit: this.limit,
          page: this.page,
          ...data
        })
        .then(res => {
          this.count = res.data.count;
          this.tableData = res.data.record.map(k => {
            return k;
          });
        });
    },
    handleClick() {
      this.page = 1;
      this.loadingLog();
    },
    handleCurrentChangePage(val) {
      this.page = val;
      this.loadingLog();
    }
  }
};
</script>

<style scoped></style>
